<template>
  <view class="home">
    <view class="wz-top">
      <image src="/static/topbj.png" mode="" class="topbjs"></image>
      <view class="cont">
        <view class="c-itemsa">
          我的
        </view>
      </view>
    </view>

    <!--  -->
    <view class="go_login">
      <view class="img">
        <image src="../../static/imgs/Rectangle 548.png" mode="" @click="gosetting()"></image>
        <text>登录 / 注册</text>
      </view>
      <!-- 成为分销商后 -->
      <view class="Share" @click="gosharecode()" v-if="flag">
        <image src="../../static/imgs/Slice 113@2x.png" mode=""></image>
        <view>分享码</view>
      </view>
    </view>

    <!--  -->
    <view class="dingdan">
      <view class="item" @click="gomyorder()">
        <image style="width: 40rpx;height: 48rpx;" src="../../static/imgs/Slice 71@2x.png" mode=""></image>
        <view class="">
          我的订单
        </view>
      </view>
      <view class="item" @click="goobligation()">
        <image style="width: 48rpx;height: 48rpx;" src="../../static/imgs/Slice 72@2x.png" mode=""></image>
        <view class="">
          待付款
        </view>
      </view>
      <view class="item" @click="gorefund()">
        <image style="width: 56rpx;height: 48rpx;" src="../../static/imgs/Slice 73@2x.png" mode=""></image>
        <view class="">
          售后/退款
        </view>
      </view>
      <view class="item" v-if="flag" @click="godistribution()">
        <image style="width: 48rpx;height: 48rpx;" src="../../static/imgs/Slice 74@2x.png" mode=""></image>
        <view class="">分销中心</view>
      </view>
      <view class="item" v-else @click="gojoin()">
        <image style="width: 48rpx;height: 48rpx;" src="../../static/imgs/Slice 75@2x.png" mode=""></image>
        <view class="">加入团队</view>
      </view>
    </view>

    <!-- 其他功能 -->
    <view class="other_feature">
      <view class="title">
        其他功能
      </view>
      <view class="other">
        <view class="item" @click="gofrugality()">
          <image style="width: 36rpx;height: 36rpx;" src="../../static/imgs/Slice 67@2x.png" mode=""></image>
          <view class="">
            勤工俭学
          </view>
        </view>
        <view class="item" @click="gobuilding()">
          <image style="width: 40rpx;height: 36rpx;" src="../../static/imgs/Slice 68@2x.png" mode=""></image>
          <view class="">
            团队团建
          </view>
        </view>
        <view class="item" @click="gofrugality()">
          <image style="width: 36rpx;height: 36rpx;" src="../../static/imgs/Slice69@2x.png" mode=""></image>
          <view class="">
            在线客服
          </view>
        </view>
        <view class="item">
          <image style="width: 36rpx;height: 36rpx;" src="../../static/imgs/Slice70@2x.png" mode=""></image>
          <view class="">
            专题活动
          </view>
        </view>
        <view class="item" @click="gosetting()">
          <image style="width: 36rpx;height: 36rpx;" src="../../static/imgs/Slice66@2x.png" mode=""></image>
          <view class="">
            个人设置
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        flag: false, // 分销商   false不是
      }
    },
    onLoad(options) {
      console.log(options);
      this.flag = options.flag; // 获取参数key1的值
    },
    methods: {
      gosharecode() {
        uni.navigateTo({
          url: '/pages/share_code/share_code'
        })
      },
      godistribution() {
        uni.navigateTo({
          url: '/pages/my/distribution'
        })
      },
      // 我的订单  
      gomyorder() {
        uni.navigateTo({
          url: '/pages/order_details/my_order'
        })
      },
      // 待付款
      goobligation() {
        uni.navigateTo({
          url: '/pages/order_details/obligation'
        })
      },
      //售后/退款
      gorefund() {
        uni.navigateTo({
          url: '/pages/order_details/refund'
        })
      },
      // 勤工俭学
      gofrugality() {
        uni.navigateTo({
          url: '/pages/frugality/frugality'
        })
      },
      // 团队团建
      gobuilding() {
        uni.navigateTo({
          url: '/pages/team_building/team_building'
        })
      },
      //个人设置
      gosetting() {
        uni.navigateTo({
          url: '/pages/setting/setting'
        })
      },
      //加入团队
      gojoin() {
        uni.navigateTo({
          url: '/pages/my_team/join_team'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .home {
    padding-bottom: 80rpx;
    background: #F5F5F5;

    .wz-top {
      background-color: #5bcce7;
      height: 180rpx;
      color: #333;
      position: relative;
      z-index: 1;

      .topbjs {
        width: 100%;
        height: 492rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .cont {
        padding: 0 20rpx;
        display: flex;
        position: relative;
        z-index: 2;

        .c-itemsa {
          line-height: 270rpx;
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 32rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

      }

    }
  }

  // go_login
  .go_login {
    margin-top: 45rpx;
    position: relative;
    z-index: 2;

    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    display: flex;

    .img {

      >image {
        margin: 0 32rpx 0 24rpx;
        width: 100rpx;
        height: 100rpx;
        background: #D9D9D9;
        border-radius: 50%;
        vertical-align: middle;
      }
    }

    .Share {
      margin-left: 300rpx;
      margin-top: 20rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 500;
      color: #333333;

      >image {
        width: 32rpx;
        height: 32rpx;
      }


    }
  }

  // 
  .dingdan {
    padding: 0 25rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-top: 40rpx;
    width: 750rpx;
    height: 156rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .item {
      text-align: center;
      font-size: 24rpx;


      >view {
        margin-top: 5rpx;
      }
    }
  }

  // 其他功能
  .other_feature {
    margin-top: 32rpx;
    margin-bottom: 525rpx;
    padding: 32rpx 32rpx;
    width: 750rpx;
    height: 345rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .title {

      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }

    .other {
      padding: 30rpx 48rpx;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      flex-wrap: wrap;

      .item {
        width: 115rpx;
        margin-right: 40rpx;
        margin-bottom: 48rpx;
        text-align: center;
        font-size: 24rpx;

        &:nth-child(4) {
          margin-right: 0;
        }

        >view {
          margin-top: 8rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }

      ;
    }
  }
</style>